<template>
  <div>
    <table>
      <h2>费用信息</h2>
      <tr>
        <td>应付单号：{{ feeInfo.payableNumber }}</td>
        <td>运单号：{{ feeInfo.waybillNumber }}</td>
        <td>运费成本：{{ feeInfo.freightCost }}元</td>
        <td>包装费：{{ feeInfo.packagingFee }}元</td>
      </tr>
      <tr>
        <td>装卸费：{{ feeInfo.handlingFee }}元</td>
        <td>其他费用：{{ feeInfo.otherFees }}元</td>
        <td>合计成本：{{ feeInfo.otherFees }}元</td>
      </tr>
      <h2>应付</h2>
      <tr>
        <td>现付：{{ feeInfo.cashPayment }}元</td>
        <td>预付：{{ feeInfo.advancePayment }}元</td>
        <td>到付：{{ feeInfo.cashOnDelivery }}元</td>
        <td>周期付：{{ feeInfo.periodicPayment }}元</td>
      </tr>
      <tr>
        <td>应收合计付：{{ feeInfo.payableAmount }}元</td>
      </tr>
      <div class="actual-receipt-section">
        <h2>实收</h2>
        <div class="input-group">
          <span>现付</span>
          <el-input v-model="actualReceipt.cashPayment" placeholder="请输入内容" @blur="sss"></el-input>
        </div>
        <div class="input-group">
          <span>预付</span>
          <el-input v-model="actualReceipt.advancePayment" placeholder="请输入内容" @blur="sss"></el-input>
        </div>
        <div class="input-group">
          <span>到付</span>
          <el-input v-model="actualReceipt.cashOnDelivery" placeholder="请输入内容" @blur="sss"></el-input>
        </div>
        <div class="input-group">
          <span>周期付</span>
          <el-input v-model="actualReceipt.periodic" placeholder="请输入内容" @blur="sss"></el-input>
        </div>
        <div class="input-group">
          <span>实收合计</span>
          <el-input v-model="actualReceipt.total" placeholder="请输入内容"></el-input>
        </div>
        <div class="input-group">
          <span>备注</span>
          <el-input type="textarea" v-model="actualReceipt.remark" placeholder="请输入内容"></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>


    </table>
  </div>

</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      feeInfo: {},
      id: this.$route.query.id,
      actualReceipt: {
        cashPayment: "",
        advancePayment: "",
        cashOnDelivery: "",
        periodic: "",
        total: "",
        remark: ""
      }
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.onSubmit();
  },
  methods:{
    sss(){
      let tao = 0;
      tao = Number(this.actualReceipt.cashPayment) +
          Number(this.actualReceipt.advancePayment) +
          Number(this.actualReceipt.cashOnDelivery) +
          Number(this.actualReceipt.periodic);
      console.log(tao)
      this.actualReceipt.total = tao;
    },
    onSubmit(){
      axios.get("http://localhost:10086/finance/yinf/gitById",{params:{id:this.id}}).then(res=>{
        console.log(res);
        this.feeInfo = res.data.data;
      })
    }
  }
};

</script>
